<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#222">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>
  <script id="hexo-configurations">
    var NexT = window.NexT ||
    {};
    var CONFIG = {
      "hostname": "cuiqingcai.com",
      "root": "/",
      "scheme": "Pisces",
      "version": "7.8.0",
      "exturl": false,
      "sidebar":
      {
        "position": "right",
        "width": 360,
        "display": "post",
        "padding": 18,
        "offset": 12,
        "onmobile": false,
        "widgets": [
          {
            "type": "image",
            "name": "阿布云",
            "enable": false,
            "url": "https://www.abuyun.com/http-proxy/introduce.html",
            "src": "https://qiniu.cuiqingcai.com/88au8.jpg",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "天验",
            "enable": true,
            "url": "https://tutorial.lengyue.video/?coupon=12ef4b1a-a3db-11ea-bb37-0242ac130002_cqx_850",
            "src": "https://qiniu.cuiqingcai.com/bco2a.png",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "华为云",
            "enable": false,
            "url": "https://activity.huaweicloud.com/2020_618_promotion/index.html?bpName=5f9f98a29e2c40b780c1793086f29fe2&bindType=1&salesID=wangyubei",
            "src": "https://qiniu.cuiqingcai.com/y42ik.jpg",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "张小鸡",
            "enable": false,
            "url": "http://www.zxiaoji.com/",
            "src": "https://qiniu.cuiqingcai.com/fm72f.png",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "Luminati",
            "src": "https://qiniu.cuiqingcai.com/ikkq9.jpg",
            "url": "https://luminati-china.io/?affiliate=ref_5fbbaaa9647883f5c6f77095",
            "width": "100%",
            "enable": false
      },
          {
            "type": "image",
            "name": "IPIDEA",
            "url": "http://www.ipidea.net/?utm-source=cqc&utm-keyword=?cqc",
            "src": "https://qiniu.cuiqingcai.com/0ywun.png",
            "width": "100%",
            "enable": true
      },
          {
            "type": "tags",
            "name": "标签云",
            "enable": true
      },
          {
            "type": "categories",
            "name": "分类",
            "enable": true
      },
          {
            "type": "friends",
            "name": "友情链接",
            "enable": true
      },
          {
            "type": "hot",
            "name": "猜你喜欢",
            "enable": true
      }]
      },
      "copycode":
      {
        "enable": true,
        "show_result": true,
        "style": "mac"
      },
      "back2top":
      {
        "enable": true,
        "sidebar": false,
        "scrollpercent": true
      },
      "bookmark":
      {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": true,
      "comments":
      {
        "style": "tabs",
        "active": "gitalk",
        "storage": true,
        "lazyload": false,
        "nav": null,
        "activeClass": "gitalk"
      },
      "algolia":
      {
        "hits":
        {
          "per_page": 10
        },
        "labels":
        {
          "input_placeholder": "Search for Posts",
          "hits_empty": "We didn't find any results for the search: ${query}",
          "hits_stats": "${hits} results found in ${time} ms"
        }
      },
      "localsearch":
      {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 10,
        "unescape": false,
        "preload": false
      },
      "motion":
      {
        "enable": false,
        "async": false,
        "transition":
        {
          "post_block": "bounceDownIn",
          "post_header": "slideDownIn",
          "post_body": "slideDownIn",
          "coll_header": "slideLeftIn",
          "sidebar": "slideUpIn"
        }
      },
      "path": "search.xml"
    };

  </script>
  <meta name="description" content="BootStrap BootStrap 是一个前端CSS框架，它提供了一些便捷的组件方便我们快速构建前端页面，目前已经到了版本4，版本4是用 Sass 编写的，版本3是由 Less 编写的，后来增加了 Sass 版本。这说明了什么？BootStrap 已经向 Sass靠近了，个人感觉 Sass 比 Less 更为强大，具有更丰富的语法功能。 所以，Sass 将会成为比 Less 更为主流的语言。">
  <meta property="og:type" content="article">
  <meta property="og:title" content="基于ES6利用Gulp编译BootStrap-Sass源码">
  <meta property="og:url" content="https://cuiqingcai.com/2906.html">
  <meta property="og:site_name" content="静觅">
  <meta property="og:description" content="BootStrap BootStrap 是一个前端CSS框架，它提供了一些便捷的组件方便我们快速构建前端页面，目前已经到了版本4，版本4是用 Sass 编写的，版本3是由 Less 编写的，后来增加了 Sass 版本。这说明了什么？BootStrap 已经向 Sass靠近了，个人感觉 Sass 比 Less 更为强大，具有更丰富的语法功能。 所以，Sass 将会成为比 Less 更为主流的语言。">
  <meta property="og:locale" content="zh_CN">
  <meta property="article:published_time" content="2016-07-03T16:23:02.000Z">
  <meta property="article:modified_time" content="2021-12-18T13:11:11.569Z">
  <meta property="article:author" content="崔庆才">
  <meta property="article:tag" content="崔庆才">
  <meta property="article:tag" content="静觅">
  <meta property="article:tag" content="PHP">
  <meta property="article:tag" content="Java">
  <meta property="article:tag" content="Python">
  <meta property="article:tag" content="Spider">
  <meta property="article:tag" content="爬虫">
  <meta property="article:tag" content="Web">
  <meta property="article:tag" content="Kubernetes">
  <meta property="article:tag" content="深度学习">
  <meta property="article:tag" content="机器学习">
  <meta property="article:tag" content="数据分析">
  <meta property="article:tag" content="网络">
  <meta property="article:tag" content="IT">
  <meta property="article:tag" content="技术">
  <meta property="article:tag" content="博客">
  <meta name="twitter:card" content="summary">
  <link rel="canonical" href="https://cuiqingcai.com/2906.html">
  <script id="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: false,
      isPost: true,
      lang: 'zh-CN'
    };

  </script>
  <title>基于ES6利用Gulp编译BootStrap-Sass源码 | 静觅</title>
  <meta name="google-site-verification" content="p_bIcnvirkFzG2dYKuNDivKD8-STet5W7D-01woA2fc" />
  <noscript>
    <style>
      .use-motion .brand,
      .use-motion .menu-item,
      .sidebar-inner,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header
      {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle
      {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line-before i
      {
        left: initial;
      }

      .use-motion .logo-line-after i
      {
        right: initial;
      }

    </style>
  </noscript>
  <link rel="alternate" href="/atom.xml" title="静觅" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container">
    <div class="headband"></div>
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏">
              <span class="toggle-line toggle-line-first"></span>
              <span class="toggle-line toggle-line-middle"></span>
              <span class="toggle-line toggle-line-last"></span>
            </div>
          </div>
          <div class="site-meta">
            <a href="/" class="brand" rel="start">
              <span class="logo-line-before"><i></i></span>
              <h1 class="site-title">静觅 <span class="site-subtitle"> 崔庆才的个人站点 </span>
              </h1>
              <span class="logo-line-after"><i></i></span>
            </a>
          </div>
          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>
        <nav class="site-nav">
          <ul id="menu" class="main-menu menu">
            <li class="menu-item menu-item-home">
              <a href="/" rel="section">首页</a>
            </li>
            <li class="menu-item menu-item-archives">
              <a href="/archives/" rel="section">文章列表</a>
            </li>
            <li class="menu-item menu-item-tags">
              <a href="/tags/" rel="section">文章标签</a>
            </li>
            <li class="menu-item menu-item-categories">
              <a href="/categories/" rel="section">文章分类</a>
            </li>
            <li class="menu-item menu-item-about">
              <a href="/about/" rel="section">关于博主</a>
            </li>
            <li class="menu-item menu-item-message">
              <a href="/message/" rel="section">给我留言</a>
            </li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger">搜索 </a>
            </li>
          </ul>
        </nav>
        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div id="search-result">
              <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>
    <div class="reading-progress-bar"></div>
    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div class="content post posts-expand">
            <article itemscope itemtype="http://schema.org/Article" class="post-block single" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/2906.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h1 class="post-title" itemprop="name headline"> 基于ES6利用Gulp编译BootStrap-Sass源码 </h1>
                <div class="post-meta">
                  <span class="post-meta-item">
                    <span class="post-meta-item-icon">
                      <i class="far fa-user"></i>
                    </span>
                    <span class="post-meta-item-text">作者</span>
                    <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                  </span>
                  <span class="post-meta-item">
                    <span class="post-meta-item-icon">
                      <i class="far fa-calendar"></i>
                    </span>
                    <span class="post-meta-item-text">发表于</span>
                    <time title="创建时间：2016-07-04 00:23:02" itemprop="dateCreated datePublished" datetime="2016-07-04T00:23:02+08:00">2016-07-04</time>
                  </span>
                  <span class="post-meta-item">
                    <span class="post-meta-item-icon">
                      <i class="far fa-folder"></i>
                    </span>
                    <span class="post-meta-item-text">分类于</span>
                    <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                      <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                    </span>
                  </span>
                  <span id="/2906.html" class="post-meta-item leancloud_visitors" data-flag-title="基于ES6利用Gulp编译BootStrap-Sass源码" title="阅读次数">
                    <span class="post-meta-item-icon">
                      <i class="fa fa-eye"></i>
                    </span>
                    <span class="post-meta-item-text">阅读次数：</span>
                    <span class="leancloud-visitors-count"></span>
                  </span>
                  <span class="post-meta-item" title="本文字数">
                    <span class="post-meta-item-icon">
                      <i class="far fa-file-word"></i>
                    </span>
                    <span class="post-meta-item-text">本文字数：</span>
                    <span>12k</span>
                  </span>
                  <span class="post-meta-item" title="阅读时长">
                    <span class="post-meta-item-icon">
                      <i class="far fa-clock"></i>
                    </span>
                    <span class="post-meta-item-text">阅读时长 &asymp;</span>
                    <span>11 分钟</span>
                  </span>
                </div>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="advertisements">
                  <div class="item">
                    <a href="http://i0k.cn/4UUsd" target="_blank">
                      <img src="https://qiniu.cuiqingcai.com/dsdhf.jpg">
                    </a>
                  </div>
                </div>
                <h2 id="BootStrap"><a href="#BootStrap" class="headerlink" title="BootStrap"></a>BootStrap</h2>
                <p>BootStrap 是一个前端CSS框架，它提供了一些便捷的组件方便我们快速构建前端页面，目前已经到了版本4，版本4是用 Sass 编写的，版本3是由 Less 编写的，后来增加了 Sass 版本。这说明了什么？BootStrap 已经向 Sass靠近了，个人感觉 Sass 比 Less 更为强大，具有更丰富的语法功能。 所以，Sass 将会成为比 Less 更为主流的语言。 目前常用的 BootStrap 版本是3，在官网也提供了相关 Sass 版本的下载。 在此提供官网下载链接和 Sass 项目 GitHub 地址。 <a href="http://v3.bootcss.com/getting-started/#download" target="_blank" rel="noopener">BootStrap</a> <a href="https://github.com/twbs/bootstrap-sass" target="_blank" rel="noopener">BootStrap-Sass</a> 在 BootStrap 的下载版本中，可以看到有三个。一个是编译好的 JS，CSS 文件，可以直接拿来用，方便快捷就可以下载这个来用。第二个是 Less 源码版本，你可以自己定义 Less 文件，在项目基础上继续用 Less 开发，编译成需要的 CSS 文件。第三个是后来新增的 Sass 版本，本节就以它为例来说明利用 Gulp 编译 BootStrap-Sass 的过程，目的一在于熟悉 Gulp 自动化编译 Sass 的流程，目的二在于了解前端自动化的工作原理。</p>
                <h2 id="Gulp"><a href="#Gulp" class="headerlink" title="Gulp"></a>Gulp</h2>
                <p>说完 BootStrap，我们再说下 Gulp，基于 Node.js。它干嘛的呢？就是一个前端自动化工具，什么用处？比如它可以编译 Less，Sass 生成到指定目录文件为 CSS，生成对应 map 文件，可以生成 JavaScript 的 map 文件，自动更新 html 中的 JS，CSS 引用路径，合并多个 JS，CSS 文件为统一整体，最小化压缩 JS，CSS 文件等等，最终目的呢？自动化替代重复劳动，提高效率。 说到 Gulp，就不得不提到它的竞争对手 Grunt，它具有和 Gulp 几乎一样的功能，然而 Grunt 有几个缺点，比如插件职责不明确，产生大量临时文件，语法繁琐等等。相比之下，Gulp插件职责明确，基于流式，不会产生临时文件，语法简单。冲着这几点，果断选择 Gulp。 利用 Gulp，我们就可以在项目中定义一个 gulpfile.babel.js 里面写入需要执行的任务，命令行执行 gulp 命令就可以完成自动化，一些重复的无聊的工作就不要你来做了。 <a href="http://www.gulpjs.com.cn/" target="_blank" rel="noopener">Gulp中文网</a></p>
                <h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2>
                <p>说完 Gulp，然后就属 ES6 了，它是 ECMAScript 6 的简称，是 JavaScript 的一个新的版本类型，由于是 2015年发布的，所以也可以叫它 ES2015。我们之前编的 JavaScript 大多数是基于ES5或之前的版本，在 ES6 的基础上增加了许多新的语法特性，比如 Class，let，const 等等。 在 ES5 中，Gulp 的执行文件叫做 gulpfile.js，到了 ES6中，它就叫做 gulpfile.babel.js 了，多了一个 badel，那 babel 又是什么？ 关于 ES6 的新特性预览可以看 <a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">ES6</a></p>
                <h2 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h2>
                <p>Babel 其实是一个 JavaScript 编译器，支持 ES6，你可以用新型的 ES6 语法来编写你的 JavaScript，Babel 会为你生成对应的 ES5 的 JavaScript。乍看之下并没有什么关系，所以在这里你可以把 babel 看作 ES6 的代名词，在 Gulp 中，新型的 ES6 语法的 JavaScript 的 gulpfile 名字命名为 gulpfile.babel.js。 <a href="http://babeljs.cn/" target="_blank" rel="noopener">Babel</a></p>
                <h2 id="NPM"><a href="#NPM" class="headerlink" title="NPM"></a>NPM</h2>
                <p>有一点 Node.js 基础的想必都知道这一个东西吧，Node Package Manager，Node.js 包管理器，利用它你可以安装 Node.js 的相关包，其中包括 Gulp。可以全局安装，加个 -g 参数，可以局部安装，需要路径下有个 package.json。 NPM怎样安装？安装了 Node.js 就好了。 <a href="https://nodejs.org" target="_blank" rel="noopener">Node.js</a> 如果觉得速度慢，可以安装 CNPM，镜像源来源非国外，是淘宝的一个镜像源，速度快。 <a href="https://npm.taobao.org/" target="_blank" rel="noopener">CMPM</a></p>
                <h2 id="Bower"><a href="#Bower" class="headerlink" title="Bower"></a>Bower</h2>
                <p>在这里还需要用到一个工具 bower，类似 NPM，算是前端的一些组件管理工具，一些前端库比如 jquery，bootstrap 等等都可以用 bower 这个工具来下载，需要在根目录下建立一个 bower.json 和 .bowerrc 文件。利用 bower 我们就可以方便地管理前端的工具包了，不用我们去手动下载复制粘贴之类的。</p>
                <h2 id="WebStorm"><a href="#WebStorm" class="headerlink" title="WebStorm"></a>WebStorm</h2>
                <p>在这再安利一个 IDE 吧，WebStorm，JetBrains公司出的一款强大又良心的编写前端的 IDE，支持各种插件，具有强大的语法提示，支持 JsHint 等代码检查，集成了终端，Git 等等强大的工具，Web 开发不二选择，推荐最新版本。 <a href="https://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">WebStorm</a></p>
                <h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2>
                <p>扯完以上东西（其实还有好多没有扯完），让我们进入正题吧，正题是什么？哦没错，那就是</p>
                <blockquote>
                  <p>基于 ES6 语法使用 Gulp 编写 gulpfile.babel.js 来编译 BootStrap-Sass 源码。</p>
                </blockquote>
                <p>下面是一些准备工作，没有做好的小伙伴请按照步骤一一完成。</p>
                <h3 id="安装-Node-js-和-NPM"><a href="#安装-Node-js-和-NPM" class="headerlink" title="安装 Node.js 和 NPM"></a>安装 Node.js 和 NPM</h3>
                <p>从 Node 的官网下载 Node 并安装，安装流程不详细说明，安装完成之后 NPM 随之就会安装成功。 命令行下输入 npm 检查一下是否可以正常运行。</p>
                <h3 id="安装-Gulp"><a href="#安装-Gulp" class="headerlink" title="安装 Gulp"></a>安装 Gulp</h3>
                <figure class="highlight cmake">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">npm <span class="keyword">install</span> -g gulp</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>加入 -g 参数是全局安装，安装完成之后你可以在任意位置使用命令。</p>
                <h3 id="安装-Bower"><a href="#安装-Bower" class="headerlink" title="安装 Bower"></a>安装 Bower</h3>
                <figure class="highlight cmake">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">npm <span class="keyword">install</span> -g bower</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>依然是全局安装 bower。</p>
                <h3 id="下载-BootStrap-Sass"><a href="#下载-BootStrap-Sass" class="headerlink" title="下载 BootStrap-Sass"></a>下载 BootStrap-Sass</h3>
                <p>可直接进入 <a href="http://v3.bootcss.com/getting-started/#download" target="_blank" rel="noopener">BootStrap</a> 页面点击第三个下载 Sass 源码。 也可以用 Git 将 <a href="https://github.com/twbs/bootstrap-sass" target="_blank" rel="noopener">BootStrap-Sass</a> 的项目 clone 下来。</p>
                <h3 id="安装-WebStorm"><a href="#安装-WebStorm" class="headerlink" title="安装 WebStorm"></a>安装 WebStorm</h3>
                <p>推荐使用 WebStorm，可以开启 JsHint 等检测工具，具有强大的代码提示功能，不过不使用也没关系。 在你的 IDE 打开下载的项目，</p>
                <h3 id="新建-gulpfile-babel-js"><a href="#新建-gulpfile-babel-js" class="headerlink" title="新建 gulpfile.babel.js"></a>新建 gulpfile.babel.js</h3>
                <p>gulpfile.babel.js 是基于 ES6 的 Gulp 处理文件，新建它，稍后所有的工作都在这里完成。</p>
                <h3 id="新建-babelrc"><a href="#新建-babelrc" class="headerlink" title="新建 .babelrc"></a>新建 .babelrc</h3>
                <p>新建 .babelrc 文件，内容</p>
                <figure class="highlight json">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"presets"</span>: [</span><br><span class="line">    <span class="string">"es2015"</span></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>这是指定 gulp 使用最新标准的 JavaScript 进行编译。</p>
                <h3 id="新建-bowerrc"><a href="#新建-bowerrc" class="headerlink" title="新建 .bowerrc"></a>新建 .bowerrc</h3>
                <p>新建 .bowerrc 文件，这是 bower 的配置文件，可以指定路径等相关配置，内容为</p>
                <figure class="highlight json">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"directory"</span>: <span class="string">"bower_components"</span></span><br><span class="line">&#125;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>这是指定 bower 工具下载前端组件时会默认下载到这个文件夹中。</p>
                <h3 id="修改-bower-json"><a href="#修改-bower-json" class="headerlink" title="修改 bower.json"></a>修改 bower.json</h3>
                <p>可以精简 bower.json 文件，比如修改名称，删去 main，ignore 配置等。 比如精简成</p>
                <figure class="highlight json">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"bootstrap-sass-demo"</span>,</span><br><span class="line">  <span class="attr">"authors"</span>: [</span><br><span class="line">    <span class="string">"Germey"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">"bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications."</span>,</span><br><span class="line">  <span class="attr">"moduleType"</span>: <span class="string">"globals"</span>,</span><br><span class="line">  <span class="attr">"keywords"</span>: [</span><br><span class="line">    <span class="string">"twbs"</span>,</span><br><span class="line">    <span class="string">"bootstrap"</span>,</span><br><span class="line">    <span class="string">"sass"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"MIT"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"jquery"</span>: <span class="string">"&gt;= 1.9.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>修改 package.json 在进行 Gulp 配置文件编写之前，首先需要引入一些 Node.js 开发包，比如 babel，gulp，wiredep等等。 修改 devDependencies 为</p>
                <figure class="highlight 1c">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="string">"devDependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"babel-core"</span>: <span class="string">"^6.4.0"</span>,</span><br><span class="line">    <span class="string">"babel-preset-es2015"</span>: <span class="string">"^6.3.13"</span>,</span><br><span class="line">    <span class="string">"babel-register"</span>: <span class="string">"^6.9.0"</span>,</span><br><span class="line">    <span class="string">"browser-sync"</span>: <span class="string">"^2.2.1"</span>,</span><br><span class="line">    <span class="string">"del"</span>: <span class="string">"^1.1.1"</span>,</span><br><span class="line">    <span class="string">"gulp"</span>: <span class="string">"^3.9.1"</span>,</span><br><span class="line">    <span class="string">"gulp-autoprefixer"</span>: <span class="string">"^3.0.1"</span>,</span><br><span class="line">    <span class="string">"gulp-babel"</span>: <span class="string">"^6.1.1"</span>,</span><br><span class="line">    <span class="string">"gulp-cache"</span>: <span class="string">"^0.2.8"</span>,</span><br><span class="line">    <span class="string">"gulp-cssnano"</span>: <span class="string">"^2.0.0"</span>,</span><br><span class="line">    <span class="string">"gulp-eslint"</span>: <span class="string">"^0.13.2"</span>,</span><br><span class="line">    <span class="string">"gulp-htmlmin"</span>: <span class="string">"^1.3.0"</span>,</span><br><span class="line">    <span class="string">"gulp-if"</span>: <span class="string">"^1.2.5"</span>,</span><br><span class="line">    <span class="string">"gulp-imagemin"</span>: <span class="string">"^2.2.1"</span>,</span><br><span class="line">    <span class="string">"gulp-load-plugins"</span>: <span class="string">"^0.10.0"</span>,</span><br><span class="line">    <span class="string">"gulp-plumber"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="string">"gulp-sass"</span>: <span class="string">"^2.0.0"</span>,</span><br><span class="line">    <span class="string">"gulp-size"</span>: <span class="string">"^1.2.1"</span>,</span><br><span class="line">    <span class="string">"gulp-sourcemaps"</span>: <span class="string">"^1.5.0"</span>,</span><br><span class="line">    <span class="string">"gulp-uglify"</span>: <span class="string">"^1.1.0"</span>,</span><br><span class="line">    <span class="string">"gulp-useref"</span>: <span class="string">"^3.0.0"</span>,</span><br><span class="line">    <span class="string">"main-bower-files"</span>: <span class="string">"^2.5.0"</span>,</span><br><span class="line">    <span class="string">"wiredep"</span>: <span class="string">"^2.2.2"</span></span><br><span class="line">  &#125;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>执行</p>
                <figure class="highlight cmake">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">npm <span class="keyword">install</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>安装所需要的库。 如此一来，所有的准备工作就差不多了。</p>
                <h2 id="实战"><a href="#实战" class="headerlink" title="实战"></a>实战</h2>
                <h3 id="引入类库"><a href="#引入类库" class="headerlink" title="引入类库"></a>引入类库</h3>
                <p>首先引入一些必须的类库</p>
                <figure class="highlight python">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">import</span> gulp <span class="keyword">from</span> <span class="string">'gulp'</span>;</span><br><span class="line"><span class="keyword">import</span> gulpLoadPlugins <span class="keyword">from</span> <span class="string">'gulp-load-plugins'</span>;</span><br><span class="line"><span class="keyword">import</span> browserSync <span class="keyword">from</span> <span class="string">'browser-sync'</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">del</span> <span class="keyword">from</span> <span class="string">'del'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;stream <span class="keyword">as</span> wiredep&#125; <span class="keyword">from</span> <span class="string">'wiredep'</span>;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>gulp 自不必多说，是 gulp 必须的核心类库。 gulp-load-plugins 是加载 gulp 插件的类库，我们知道 gulp 插件非常丰富，如果要一个个引入的话，需要写很多很多条 import 语句，引入了这个插件之后，调用时只需要加 点(.) + 插件名称 那就可以使用了。 browser-sync 是浏览器同步工具，如果有代码更新，浏览器会自动刷新更新资源。 del 是删除资源的工具包。 wiredep 是从 bower 同步到 html 中资源引用的插件，bower 中定义了依赖包，有了它，这些包的引用比如 js，css 就可以直接自动生成到 html 文件中。 接着初始化一些变量。</p>
                <figure class="highlight actionscript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">const</span> $ = gulpLoadPlugins();</span><br><span class="line"><span class="keyword">const</span> reload = browserSync.reload;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>将加载插件的插件初始化为 $ 符号，然后初始化 reload 等变量。</p>
                <h3 id="Sass-编译"><a href="#Sass-编译" class="headerlink" title="Sass 编译"></a>Sass 编译</h3>
                <p>下载好 Sass 源码之后，打开 assets/stylesheets 目录，可以看到 BootStrap 的 Sass 源代码。不过发现文件名都是 _ 开头的，这种类型的文件是不能被编译生成的，所以新建一个 bootstrap.sass 文件，内容为</p>
                <figure class="highlight css">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">@import</span> <span class="string">"_bootstrap"</span>;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>最后生成的目录结构如下</p>
                <figure class="highlight 1c">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="string">|_____bootstrap-compass.scss</span></span><br><span class="line"><span class="string">|_____bootstrap-mincer.scss</span></span><br><span class="line"><span class="string">|_____bootstrap-sprockets.scss</span></span><br><span class="line"><span class="string">|_____bootstrap.scss</span></span><br><span class="line"><span class="string">|____bootstrap</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>接下来我们只需要编译 bootstrap.scss 即可。 定义一个路径配置</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">const styles</span> = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'assets/stylesheets/**/*.scss'</span>,</span><br><span class="line">    <span class="string">'tmp'</span>: <span class="string">'.tmp/css'</span>,</span><br><span class="line">&#125;;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>包含 in 和 tmp 目录，in 代表 Sass 源文件地址，tmp 代表生成的编译后的 CSS 目录。 接下来最重要的，指定一个 Gulp Task</p>
                <figure class="highlight less">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="selector-tag">gulp</span><span class="selector-class">.task</span>(<span class="string">'styles'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="selector-tag">return</span> <span class="selector-tag">gulp</span><span class="selector-class">.src</span>(styles.in)</span><br><span class="line">        <span class="selector-class">.pipe</span>($.plumber())</span><br><span class="line">        <span class="selector-class">.pipe</span>($.sourcemaps.init())</span><br><span class="line">        <span class="selector-class">.pipe</span>($.sass.sync(&#123;</span><br><span class="line">            <span class="attribute">outputStyle</span>: <span class="string">'expanded'</span>,</span><br><span class="line">            <span class="attribute">precision</span>: <span class="number">10</span>,</span><br><span class="line">            <span class="attribute">includePaths</span>: [<span class="string">'.'</span>]</span><br><span class="line">        &#125;).on(<span class="string">'error'</span>, $.sass.logError))</span><br><span class="line">        <span class="selector-class">.pipe</span>($.autoprefixer(&#123;<span class="attribute">browsers</span>: [<span class="string">'&gt; 1%'</span>, <span class="string">'last 2 versions'</span>, <span class="string">'Firefox ESR'</span>]&#125;))</span><br><span class="line">        <span class="selector-class">.pipe</span>($.sourcemaps.write())</span><br><span class="line">        <span class="selector-class">.pipe</span>(gulp.dest(styles.tmp))</span><br><span class="line">        <span class="selector-class">.pipe</span>(reload(&#123;<span class="attribute">stream</span>: true&#125;));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>task 是 gulp 的一个核心方法，定义了 styles 这个 task 之后，就可以执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp styles</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>就可以完成以上定义的任务。 首先利用 gulp.src 引入了需要编译的 Sass 文件，然后利用一系列 pipe 流式管道来指定一系列处理任务。 plumber 是一个错误处理插件，当出现错误时，不会立即卡主，而是进入 plumber，防止程序运行终止。 sourcemaps 是用来生成映射文件的一个插件，map 文件记录了从 Sass 编译成 CSS 的过程中，每一行的 Sass 代码对应哪一行的 CSS 代码。 sass 是核心的编译 Sass 的插件，指定了输出格式 expanded，precision 指定了当输出十进制数字时，使用多少位的精度，然后指定了路径和错误日志。 autoprefixer 是一个以友好方式处理浏览器前缀的插件，比如一些 CSS 的定义会出现 -webkit- 等等，此插件是用来处理浏览器前缀的。</p>
                <blockquote>
                  <p>Autoprefixer默认将支持主流浏览器最近2个版本，这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择： 主流浏览器最近2个版本用“last 2 versions”； 全球统计有超过1%的使用率使用“&gt;1%”; 仅新版本用“ff&gt;20”或”ff&gt;=20”. 然后Autoprefixer计算哪些前缀是需要的，哪些是已经过期的。</p>
                </blockquote>
                <p>dest 是输出编译后的文件，指定输出路径。 reload 是同步浏览器资源的方法。 定义好如上内容之后，命令行输入</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp styles</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>就会发现出现了 .tmp 目录，里面有 css/bootstrap.css</p>
                <h3 id="JavaScript-处理"><a href="#JavaScript-处理" class="headerlink" title="JavaScript 处理"></a>JavaScript 处理</h3>
                <p>同理，定义一个 task，用来处理 JavaScript</p>
                <figure class="highlight less">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="selector-tag">gulp</span><span class="selector-class">.task</span>(<span class="string">'scripts'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="selector-tag">return</span> <span class="selector-tag">gulp</span><span class="selector-class">.src</span>(scripts.in)</span><br><span class="line">        <span class="selector-class">.pipe</span>($.plumber())</span><br><span class="line">        <span class="selector-class">.pipe</span>($.sourcemaps.init())</span><br><span class="line">        <span class="selector-class">.pipe</span>($.babel())</span><br><span class="line">        <span class="selector-class">.pipe</span>($.sourcemaps.write(<span class="string">'.'</span>))</span><br><span class="line">        <span class="selector-class">.pipe</span>(gulp.dest(scripts.tmp))</span><br><span class="line">        <span class="selector-class">.pipe</span>(reload(&#123;<span class="attribute">stream</span>: true&#125;));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>相比之下，此处多了一个 babel 插件。 babel 是基于 ES6 标准的一个 JavaScript 插件，它可以对 ES6 版本的代码进行转换，转换成 ES5 标准，避免出现出现 ES6 不兼容问题。 在此处还需要 scripts 的路径定义</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">const scripts</span> = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'assets/javascripts/**/*.js'</span>,</span><br><span class="line">    <span class="string">'tmp'</span>: <span class="string">'.tmp/js'</span>,</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist/js'</span></span><br><span class="line">&#125;;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>定义完成之后，执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp scripts</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>就可以完成 JavaScript 的转换。 另外还有一个专门负责代码风格转换的 task，使用了 eslint 这个插件</p>
                <figure class="highlight roboconf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">const lint = &#123;</span><br><span class="line">    '<span class="attribute">in'</span>: 'assets/javascripts/**/*<span class="variable">.js</span>'</span><br><span class="line">&#125;;</span><br><span class="line"><span class="attribute">gulp.task('lint', () =&gt; &#123;</span></span><br><span class="line"><span class="attribute">    return gulp.src(lint.in)</span></span><br><span class="line"><span class="attribute">        .pipe(reload(&#123;stream</span>: true, once: true&#125;))</span><br><span class="line">        <span class="variable">.pipe</span>($<span class="variable">.eslint</span><span class="variable">.format</span>())</span><br><span class="line">        <span class="variable">.pipe</span>($<span class="variable">.if</span>(!browserSync<span class="variable">.active</span>, $<span class="variable">.eslint</span><span class="variable">.failAfterError</span>()));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp lint</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>之后，就可以进行代码风格的标准化。</p>
                <h3 id="HTML处理"><a href="#HTML处理" class="headerlink" title="HTML处理"></a>HTML处理</h3>
                <p>我们可以发现，在前面的输出路径都是 .tmp 临时目录，后面还会有一个目录是 dist 目录，试想一下，如果我们编译了 BootStrap 而在 HTML 中没有引用，那编译来还有必要吗？ 所以说，.tmp 作为临时目录，它可以存放被编译后的文件，但是不一定会被引用。被真正引用的文件才是真正有用的文件，我们将它放到 dist 目录。 所以接下来的 HTML 处理就是检查一下有哪些 CSS 和 JS 被引用了，可以将它们合并，然后将新的文件放到 dist 并更新它的引用路径。</p>
                <figure class="highlight typescript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">const</span> html = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'assets/*.html'</span>,</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'html'</span>, [<span class="string">'styles'</span>, <span class="string">'scripts'</span>], <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(html.in)</span><br><span class="line">        .pipe($.useref(&#123;searchPath: [<span class="string">'.tmp'</span>, <span class="string">'assets'</span>, <span class="string">'.'</span>]&#125;))</span><br><span class="line">        .pipe($.<span class="keyword">if</span>(<span class="string">'*.js'</span>, $.uglify()))</span><br><span class="line">        .pipe($.<span class="keyword">if</span>(<span class="string">'*.css'</span>, $.cssnano()))</span><br><span class="line">        .pipe($.<span class="keyword">if</span>(<span class="string">'*.html'</span>, $.htmlmin(&#123;collapseWhitespace: <span class="literal">true</span>&#125;)))</span><br><span class="line">        .pipe(gulp.dest(html.out));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>在这里定义了一个 task 叫做 html，第二个参数是 styles 和 scripts 组成的数组，意思是在执行这个 task 之前，首先要执行这两个任务。 在处理时用到了 useref 这个插件，它可以检测 HTML 中引用的 CSS 和 JS，可以执行合并和压缩，然后更新新的路径。 这个插件的作用如上所述。 比如 HTML 当前内容是这样的</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Welcome<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- bower:css --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- endbower --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- build:css css/combined.css --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"../.tmp/css/bootstrap.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- endbuild --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h4</span>&gt;</span>Hello This is a Gulp Sass Demo Configured by Germey.<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- bower:js --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- endbower --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- build:js js/combined.js --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"javascripts/bootstrap.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"javascripts/bootstrap-sprockets.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- endbuild --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>可以看到</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="comment">&lt;!-- build:css css/combined.css --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"../.tmp/css/bootstrap.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- endbuild --&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>这里引用了 .tmp 目录下的 bootstrap.css，然后在外面用注释的形式定义了构建的路径和文件名。 那么执行这个任务之后，它便会将当前引用的 .tmp 目录下的 bootstrap.css 处理并输出为 combined.css，然后新生成的 HTML 文件的引用路径也相应改为 combined.css JS 也是同理</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="comment">&lt;!-- build:js js/combined.js --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"javascripts/bootstrap.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"javascripts/bootstrap-sprockets.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- endbuild --&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>在此处是将两个文件处理合并为 combined.js 执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp html</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>后，会新生成一个 HTML 文件到 dist 目录，内容为</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Welcome<span class="tag">&lt;/<span class="name">title</span>&gt;</span><span class="comment">&lt;!-- bower:css --&gt;</span><span class="comment">&lt;!-- endbower --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/combined.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;<span class="name">h4</span>&gt;</span>Hello This is a Gulp Sass Demo Configured by Germey.<span class="tag">&lt;/<span class="name">h4</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span><span class="comment">&lt;!-- bower:js --&gt;</span><span class="comment">&lt;!-- endbower --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/combined.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>dist 的目录结构为</p>
                <figure class="highlight gherkin">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">|<span class="string">____css</span></span><br><span class="line">|<span class="string"> </span>|<span class="string">____combined.css</span></span><br><span class="line">|<span class="string">____index.html</span></span><br><span class="line">|____js</span><br><span class="line">|<span class="string"> </span>|<span class="string">____combined.js</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>以上为利用 useref 插件进行 HTML 处理的过程。</p>
                <h3 id="图片压缩处理"><a href="#图片压缩处理" class="headerlink" title="图片压缩处理"></a>图片压缩处理</h3>
                <p>接下来是对图片字体及其他格式文件的处理。 图片的主要处理是进行压缩</p>
                <figure class="highlight typescript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">const</span> images = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'assets/images/**/*'</span>,</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist/images'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'images'</span>, <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(images.in)</span><br><span class="line">        .pipe($.imagemin(&#123;</span><br><span class="line">            progressive: <span class="literal">true</span>,</span><br><span class="line">            interlaced: <span class="literal">true</span>,</span><br><span class="line">            svgoPlugins: [&#123;cleanupIDs: <span class="literal">false</span>&#125;]</span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(gulp.dest(images.out));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>定义好了 images 的输入和输出路径之后，定义 images 这个 task，在这里使用了 imagemin 这个插件 imagemin 插件是用来压缩图片的插件，处理后图片的占用空间会变小。 执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp images</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>即可完成对图片的压缩</p>
                <h3 id="字体处理"><a href="#字体处理" class="headerlink" title="字体处理"></a>字体处理</h3>
                <p>字体的处理，筛选出某些特定格式的字体，输出到指定目录</p>
                <figure class="highlight php">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">const</span> fonts = &#123;</span><br><span class="line">    <span class="string">'in'</span>: [<span class="string">'assets/fonts/bootstrap/*'</span>],</span><br><span class="line">    <span class="string">'tmp'</span>: <span class="string">'.tmp/fonts'</span>,</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist/fonts'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'fonts'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(<span class="keyword">require</span>(<span class="string">'main-bower-files'</span>)(<span class="string">'**/*.&#123;eot,svg,ttf,woff,woff2&#125;'</span>, <span class="function"><span class="keyword">function</span><span class="params">(err)</span> </span>&#123;</span><br><span class="line">    &#125;)</span><br><span class="line">        .concat(fonts.in))</span><br><span class="line">        .pipe(gulp.dest(fonts.tmp))</span><br><span class="line">        .pipe(gulp.dest(fonts.out));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp fonts</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>即可完成字体的处理</p>
                <h3 id="额外文件处理"><a href="#额外文件处理" class="headerlink" title="额外文件处理"></a>额外文件处理</h3>
                <p>在项目中还存在非 HTML 的文件，比如 视频，音频，PHP等。这些做一下统一判断然后归档即可。</p>
                <figure class="highlight coffeescript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">const extras = &#123;</span><br><span class="line">    <span class="string">'in'</span>: [</span><br><span class="line">        <span class="string">'assets/*.*'</span>,</span><br><span class="line">        <span class="string">'!assets/*.html'</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'extras'</span>, <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(extras.<span class="keyword">in</span>, &#123;</span><br><span class="line">        dot: <span class="literal">true</span></span><br><span class="line">    &#125;).pipe(gulp.dest(extras.out));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>其中 in 指定了在 asset 目录中除 html 后缀的文件，此处进行读入筛选，然后输出到指定路径即可。 执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp extras</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>即可完成额外文件的处理</p>
                <h3 id="文件依赖处理"><a href="#文件依赖处理" class="headerlink" title="文件依赖处理"></a>文件依赖处理</h3>
                <p>设想一个情景，一个项目需要很多很多依赖库，我们在 bower.json 中定义好了所有的依赖，使用 bower 将他们下载了下来，如果我们需要在 HTML 中引用他们，如果我们还是手动地添加一个个引用那是不是太麻烦了？ 没错，这个操作同样可以自动化操作，借助 wiredep 插件即可。</p>
                <figure class="highlight typescript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="keyword">const</span> wire = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'assets/*.html'</span>,</span><br><span class="line">    <span class="string">'out'</span>: <span class="string">'dist'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'wiredep'</span>, <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    gulp.src(wire.in)</span><br><span class="line">        .pipe(wiredep(&#123;</span><br><span class="line">            ignorePath: <span class="regexp">/^(\.\.\/)*\.\./</span></span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe($.useref(&#123;searchPath: [<span class="string">'.tmp'</span>, <span class="string">'assets'</span>, <span class="string">'.'</span>]&#125;))</span><br><span class="line">        .pipe($.<span class="keyword">if</span>(<span class="string">'*.js'</span>, $.uglify()))</span><br><span class="line">        .pipe($.<span class="keyword">if</span>(<span class="string">'*.css'</span>, $.cssnano()))</span><br><span class="line">        .pipe(gulp.dest(wire.out));</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>在这里使用了 wiredep 插件。 在 HTML中定义如下内容</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="comment">&lt;!-- bower:js --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- endbower --&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>执行</p>
                <figure class="highlight ebnf">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="attribute">gulp wiredep</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>之后，便会自动更新 bower.json 中所有依赖库的引用，在这里以 JS 为例子。 当前在 bower.json 中定义了</p>
                <figure class="highlight 1c">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="string">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"jquery"</span>: <span class="string">"&gt;= 1.9.0"</span></span><br><span class="line">  &#125;</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>执行完毕之后，HTML中便有了</p>
                <figure class="highlight xml">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line"><span class="comment">&lt;!-- bower:js --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/bower_components/jquery/dist/jquery.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- endbower --&gt;</span></span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>路径会随之更新。</p>
                <h3 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h3>
                <p>最后是一个 serve 的 task 在本地搭建一个服务器来测试，同时监听文件的变动随时更新资源文件。</p>
                <figure class="highlight pgsql">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">const serve = &#123;</span><br><span class="line">    <span class="string">'baseDir'</span>: [<span class="string">'.tmp'</span>, <span class="string">'assets'</span>],</span><br><span class="line">    <span class="string">'baseDirDist'</span>: [<span class="string">'dist'</span>],</span><br><span class="line">    <span class="string">'routes'</span>: &#123;</span><br><span class="line">        <span class="string">'/bower_components'</span>: <span class="string">'bower_components'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'port'</span>: <span class="number">9000</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'serve'</span>, [<span class="string">'styles'</span>, <span class="string">'scripts'</span>, <span class="string">'fonts'</span>, <span class="string">'wiredep'</span>], () =&gt; &#123;</span><br><span class="line">    browserSync(&#123;</span><br><span class="line">        <span class="keyword">notify</span>: <span class="keyword">false</span>,</span><br><span class="line">        port: serve.port,</span><br><span class="line">        <span class="keyword">server</span>: &#123;</span><br><span class="line">            baseDir: serve.baseDir,</span><br><span class="line">            routes: serve.routes</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    gulp.watch([</span><br><span class="line">        html.<span class="keyword">out</span>, scripts.tmp, scripts.<span class="keyword">out</span>, images.<span class="keyword">out</span>, fonts.tmp, fonts.<span class="keyword">out</span></span><br><span class="line">    ]).<span class="keyword">on</span>(<span class="string">'change'</span>, reload);</span><br><span class="line">    gulp.watch(styles.<span class="keyword">in</span>, [<span class="string">'styles'</span>]);</span><br><span class="line">    gulp.watch(scripts.<span class="keyword">in</span>, [<span class="string">'scripts'</span>]);</span><br><span class="line">    gulp.watch(fonts.<span class="keyword">in</span>, [<span class="string">'fonts'</span>]);</span><br><span class="line">    gulp.watch(<span class="string">'bower.json'</span>, [<span class="string">'wiredep'</span>, <span class="string">'fonts'</span>]);</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">'serve:dist'</span>, () =&gt; &#123;</span><br><span class="line">    browserSync(&#123;</span><br><span class="line">        <span class="keyword">notify</span>: <span class="keyword">false</span>,</span><br><span class="line">        port: serve.port,</span><br><span class="line">        <span class="keyword">server</span>: &#123;</span><br><span class="line">            baseDir: serve.baseDirDist</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>上述 serve 首先要执行 styles, scripts, fonts, wiredep 的操作，然后在 9000 端口上运行。 同时利用 watch 方法监听文件的变动，随时更新。</p>
                <h3 id="删除和一键构建"><a href="#删除和一键构建" class="headerlink" title="删除和一键构建"></a>删除和一键构建</h3>
                <p>最后还有清理构建文件和一键构建的功能。 清理 task 叫做 clean。</p>
                <figure class="highlight gradle">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">gulp.<span class="keyword">task</span>(<span class="string">'clean'</span>, del.bind(<span class="keyword">null</span>, [<span class="string">'.tmp'</span>, <span class="string">'dist'</span>]));</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>即将 .tmp 和 dist 目录进行清理。 一键构建就是执行其他所有操作，将所有操作汇总。</p>
                <figure class="highlight coffeescript">
                  <table>
                    <tr>
                      <td class="gutter">
                        <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                      </td>
                      <td class="code">
                        <pre><span class="line">const build = &#123;</span><br><span class="line">    <span class="string">'in'</span>: <span class="string">'dist/**/*'</span></span><br><span class="line">&#125;;</span><br><span class="line">gulp.task(<span class="string">'build'</span>, [<span class="string">'lint'</span>, <span class="string">'html'</span>, <span class="string">'images'</span>, <span class="string">'fonts'</span>, <span class="string">'extras'</span>], <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(build.<span class="keyword">in</span>).pipe($.size(&#123;title: <span class="string">'build'</span>, gzip: <span class="literal">true</span>&#125;));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'clean'</span>], <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    gulp.start(<span class="string">'build'</span>);</span><br><span class="line">&#125;);</span><br></pre>
                      </td>
                    </tr>
                  </table>
                </figure>
                <p>最后执行了一个总的压缩汇总，</p>
                <h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2>
                <p>以上便是利用 Gulp 编译 Bootstrap-Sass 的全部过程。 整个项目的代码如下 <a href="https://github.com/Germey/GulpBootStrapSass" target="_blank" rel="noopener">GulpBootstrapSass</a> 如果有问题，欢迎留言交流，希望对大家有帮助！</p>
              </div>
              <div class="reward-container">
                <div></div>
                <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';"> 打赏 </button>
                <div id="qr" style="display: none;">
                  <div style="display: inline-block;">
                    <img src="/images/wechatpay.jpg" alt="崔庆才 微信支付">
                    <p>微信支付</p>
                  </div>
                  <div style="display: inline-block;">
                    <img src="/images/alipay.jpg" alt="崔庆才 支付宝">
                    <p>支付宝</p>
                  </div>
                </div>
              </div>
              <footer class="post-footer">
                <div class="post-nav">
                  <div class="post-nav-item">
                    <a href="/2852.html" rel="prev" title="Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺">
                      <i class="fa fa-chevron-left"></i> Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺 </a>
                  </div>
                  <div class="post-nav-item">
                    <a href="/2956.html" rel="next" title="python version 2. required,which was not found in the registry 解决方案"> python version 2. required,which was not found in the registry 解决方案 <i class="fa fa-chevron-right"></i>
                    </a>
                  </div>
                </div>
              </footer>
            </article>
          </div>
          <div class="comments" id="gitalk-container"></div>
          <script>
            window.addEventListener('tabs:register', () =>
            {
              let
              {
                activeClass
              } = CONFIG.comments;
              if (CONFIG.comments.storage)
              {
                activeClass = localStorage.getItem('comments_active') || activeClass;
              }
              if (activeClass)
              {
                let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
                if (activeTab)
                {
                  activeTab.click();
                }
              }
            });
            if (CONFIG.comments.storage)
            {
              window.addEventListener('tabs:click', event =>
              {
                if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
                let commentClass = event.target.classList[1];
                localStorage.setItem('comments_active', commentClass);
              });
            }

          </script>
        </div>
        <div class="toggle sidebar-toggle">
          <span class="toggle-line toggle-line-first"></span>
          <span class="toggle-line toggle-line-middle"></span>
          <span class="toggle-line toggle-line-last"></span>
        </div>
        <aside class="sidebar">
          <div class="sidebar-inner">
            <ul class="sidebar-nav motion-element">
              <li class="sidebar-nav-toc"> 文章目录 </li>
              <li class="sidebar-nav-overview"> 站点概览 </li>
            </ul>
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
              <div class="post-toc motion-element">
                <ol class="nav">
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#BootStrap"><span class="nav-number">1.</span> <span class="nav-text">BootStrap</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Gulp"><span class="nav-number">2.</span> <span class="nav-text">Gulp</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#ES6"><span class="nav-number">3.</span> <span class="nav-text">ES6</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Babel"><span class="nav-number">4.</span> <span class="nav-text">Babel</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#NPM"><span class="nav-number">5.</span> <span class="nav-text">NPM</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#Bower"><span class="nav-number">6.</span> <span class="nav-text">Bower</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#WebStorm"><span class="nav-number">7.</span> <span class="nav-text">WebStorm</span></a></li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#准备工作"><span class="nav-number">8.</span> <span class="nav-text">准备工作</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#安装-Node-js-和-NPM"><span class="nav-number">8.1.</span> <span class="nav-text">安装 Node.js 和 NPM</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#安装-Gulp"><span class="nav-number">8.2.</span> <span class="nav-text">安装 Gulp</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#安装-Bower"><span class="nav-number">8.3.</span> <span class="nav-text">安装 Bower</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#下载-BootStrap-Sass"><span class="nav-number">8.4.</span> <span class="nav-text">下载 BootStrap-Sass</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#安装-WebStorm"><span class="nav-number">8.5.</span> <span class="nav-text">安装 WebStorm</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#新建-gulpfile-babel-js"><span class="nav-number">8.6.</span> <span class="nav-text">新建 gulpfile.babel.js</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#新建-babelrc"><span class="nav-number">8.7.</span> <span class="nav-text">新建 .babelrc</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#新建-bowerrc"><span class="nav-number">8.8.</span> <span class="nav-text">新建 .bowerrc</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#修改-bower-json"><span class="nav-number">8.9.</span> <span class="nav-text">修改 bower.json</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#实战"><span class="nav-number">9.</span> <span class="nav-text">实战</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#引入类库"><span class="nav-number">9.1.</span> <span class="nav-text">引入类库</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#Sass-编译"><span class="nav-number">9.2.</span> <span class="nav-text">Sass 编译</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-处理"><span class="nav-number">9.3.</span> <span class="nav-text">JavaScript 处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#HTML处理"><span class="nav-number">9.4.</span> <span class="nav-text">HTML处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#图片压缩处理"><span class="nav-number">9.5.</span> <span class="nav-text">图片压缩处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#字体处理"><span class="nav-number">9.6.</span> <span class="nav-text">字体处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#额外文件处理"><span class="nav-number">9.7.</span> <span class="nav-text">额外文件处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#文件依赖处理"><span class="nav-number">9.8.</span> <span class="nav-text">文件依赖处理</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#服务器"><span class="nav-number">9.9.</span> <span class="nav-text">服务器</span></a></li>
                      <li class="nav-item nav-level-3"><a class="nav-link" href="#删除和一键构建"><span class="nav-number">9.10.</span> <span class="nav-text">删除和一键构建</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-2"><a class="nav-link" href="#代码"><span class="nav-number">10.</span> <span class="nav-text">代码</span></a></li>
                </ol>
              </div>
            </div>
            <!--/noindex-->
            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <img class="site-author-image" itemprop="image" alt="崔庆才" src="/images/avatar.png">
                <p class="site-author-name" itemprop="name">崔庆才</p>
                <div class="site-description" itemprop="description">崔庆才的个人站点，记录生活的瞬间，分享学习的心得。</div>
              </div>
              <div class="site-state-wrap motion-element">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">
                      <span class="site-state-item-count">608</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">
                      <span class="site-state-item-count">24</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">
                      <span class="site-state-item-count">156</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author motion-element">
                <span class="links-of-author-item">
                  <a href="https://github.com/Germey" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;Germey" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:cqc@cuiqingcai.com.com" title="邮件 → mailto:cqc@cuiqingcai.com.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>邮件</a>
                </span>
                <span class="links-of-author-item">
                  <a href="https://weibo.com/cuiqingcai" title="微博 → https:&#x2F;&#x2F;weibo.com&#x2F;cuiqingcai" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>微博</a>
                </span>
                <span class="links-of-author-item">
                  <a href="https://www.zhihu.com/people/Germey" title="知乎 → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;Germey" rel="noopener" target="_blank"><i class="fa fa-magic fa-fw"></i>知乎</a>
                </span>
              </div>
            </div>
            <div style=" width: 100%;" class="sidebar-panel sidebar-panel-image sidebar-panel-active">
              <a href="https://tutorial.lengyue.video/?coupon=12ef4b1a-a3db-11ea-bb37-0242ac130002_cqx_850" target="_blank" rel="noopener">
                <img src="https://qiniu.cuiqingcai.com/bco2a.png" style=" width: 100%;">
              </a>
            </div>
            <div style=" width: 100%;" class="sidebar-panel sidebar-panel-image sidebar-panel-active">
              <a href="http://www.ipidea.net/?utm-source=cqc&utm-keyword=?cqc" target="_blank" rel="noopener">
                <img src="https://qiniu.cuiqingcai.com/0ywun.png" style=" width: 100%;">
              </a>
            </div>
            <div class="sidebar-panel sidebar-panel-tags sidebar-panel-active">
              <h4 class="name"> 标签云 </h4>
              <div class="content">
                <a href="/tags/2048/" style="font-size: 10px;">2048</a> <a href="/tags/API/" style="font-size: 10px;">API</a> <a href="/tags/Bootstrap/" style="font-size: 11.25px;">Bootstrap</a> <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/CQC/" style="font-size: 10px;">CQC</a> <a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/CSS-%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 10px;">CSS 反爬虫</a> <a href="/tags/CV/" style="font-size: 10px;">CV</a> <a href="/tags/Django/" style="font-size: 10px;">Django</a> <a href="/tags/Eclipse/" style="font-size: 11.25px;">Eclipse</a> <a href="/tags/FTP/" style="font-size: 10px;">FTP</a> <a href="/tags/Git/" style="font-size: 10px;">Git</a> <a href="/tags/GitHub/" style="font-size: 13.75px;">GitHub</a> <a href="/tags/HTML5/" style="font-size: 10px;">HTML5</a> <a href="/tags/Hexo/" style="font-size: 10px;">Hexo</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/JSP/" style="font-size: 10px;">JSP</a> <a href="/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/tags/K8s/" style="font-size: 10px;">K8s</a> <a href="/tags/LOGO/" style="font-size: 10px;">LOGO</a> <a href="/tags/Linux/" style="font-size: 10px;">Linux</a> <a href="/tags/MIUI/" style="font-size: 10px;">MIUI</a> <a href="/tags/MongoDB/" style="font-size: 10px;">MongoDB</a> <a href="/tags/Mysql/" style="font-size: 10px;">Mysql</a> <a href="/tags/NBA/" style="font-size: 10px;">NBA</a> <a href="/tags/PHP/" style="font-size: 11.25px;">PHP</a> <a href="/tags/PS/" style="font-size: 10px;">PS</a> <a href="/tags/Pathlib/" style="font-size: 10px;">Pathlib</a> <a href="/tags/PhantomJS/" style="font-size: 10px;">PhantomJS</a> <a href="/tags/Python/" style="font-size: 15px;">Python</a> <a href="/tags/Python3/" style="font-size: 12.5px;">Python3</a> <a href="/tags/Pythonic/" style="font-size: 10px;">Pythonic</a> <a href="/tags/QQ/" style="font-size: 10px;">QQ</a> <a href="/tags/Redis/" style="font-size: 10px;">Redis</a> <a href="/tags/SAE/" style="font-size: 10px;">SAE</a> <a href="/tags/SSH/" style="font-size: 10px;">SSH</a> <a href="/tags/SVG/" style="font-size: 10px;">SVG</a> <a href="/tags/Scrapy/" style="font-size: 10px;">Scrapy</a> <a href="/tags/Scrapy-redis/" style="font-size: 10px;">Scrapy-redis</a> <a href="/tags/Scrapy%E5%88%86%E5%B8%83%E5%BC%8F/" style="font-size: 10px;">Scrapy分布式</a> <a href="/tags/Selenium/" style="font-size: 10px;">Selenium</a> <a href="/tags/TKE/" style="font-size: 10px;">TKE</a> <a href="/tags/Ubuntu/" style="font-size: 11.25px;">Ubuntu</a> <a href="/tags/VS-Code/" style="font-size: 10px;">VS Code</a> <a href="/tags/Vs-Code/" style="font-size: 10px;">Vs Code</a> <a href="/tags/Vue/" style="font-size: 11.25px;">Vue</a> <a href="/tags/Webpack/" style="font-size: 10px;">Webpack</a> <a href="/tags/Windows/" style="font-size: 10px;">Windows</a> <a href="/tags/Winpcap/" style="font-size: 10px;">Winpcap</a> <a href="/tags/WordPress/" style="font-size: 13.75px;">WordPress</a> <a href="/tags/Youtube/" style="font-size: 11.25px;">Youtube</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/ansible/" style="font-size: 10px;">ansible</a> <a href="/tags/cocos2d-x/" style="font-size: 10px;">cocos2d-x</a> <a href="/tags/e6/" style="font-size: 10px;">e6</a> <a href="/tags/fitvids/" style="font-size: 10px;">fitvids</a> <a href="/tags/git/" style="font-size: 11.25px;">git</a> <a href="/tags/json/" style="font-size: 10px;">json</a> <a href="/tags/js%E9%80%86%E5%90%91/" style="font-size: 10px;">js逆向</a> <a href="/tags/kubernetes/" style="font-size: 10px;">kubernetes</a> <a href="/tags/log/" style="font-size: 10px;">log</a> <a href="/tags/logging/" style="font-size: 10px;">logging</a> <a href="/tags/matlab/" style="font-size: 11.25px;">matlab</a> <a href="/tags/python/" style="font-size: 20px;">python</a> <a href="/tags/pytube/" style="font-size: 11.25px;">pytube</a> <a href="/tags/pywin32/" style="font-size: 10px;">pywin32</a> <a href="/tags/style/" style="font-size: 10px;">style</a> <a href="/tags/tomcat/" style="font-size: 10px;">tomcat</a> <a href="/tags/ubuntu/" style="font-size: 10px;">ubuntu</a> <a href="/tags/uwsgi/" style="font-size: 10px;">uwsgi</a> <a href="/tags/vsftpd/" style="font-size: 10px;">vsftpd</a> <a href="/tags/wamp/" style="font-size: 10px;">wamp</a> <a href="/tags/wineQQ/" style="font-size: 10px;">wineQQ</a> <a href="/tags/%E4%B8%83%E7%89%9B/" style="font-size: 11.25px;">七牛</a> <a href="/tags/%E4%B8%8A%E6%B5%B7/" style="font-size: 10px;">上海</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/" style="font-size: 10px;">个人网站</a> <a href="/tags/%E4%B8%BB%E9%A2%98/" style="font-size: 10px;">主题</a> <a href="/tags/%E4%BA%91%E4%BA%A7%E5%93%81/" style="font-size: 10px;">云产品</a> <a href="/tags/%E4%BA%91%E5%AD%98%E5%82%A8/" style="font-size: 10px;">云存储</a> <a href="/tags/%E4%BA%AC%E4%B8%9C%E4%BA%91/" style="font-size: 10px;">京东云</a> <a href="/tags/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/" style="font-size: 12.5px;">人工智能</a> <a href="/tags/%E4%BB%A3%E7%90%86/" style="font-size: 10px;">代理</a> <a href="/tags/%E4%BB%A3%E7%A0%81/" style="font-size: 10px;">代码</a> <a href="/tags/%E4%BB%A3%E7%A0%81%E5%88%86%E4%BA%AB%E5%9B%BE/" style="font-size: 10px;">代码分享图</a> <a href="/tags/%E4%BC%98%E5%8C%96/" style="font-size: 10px;">优化</a> <a href="/tags/%E4%BD%8D%E8%BF%90%E7%AE%97/" style="font-size: 10px;">位运算</a> <a href="/tags/%E5%85%AC%E4%BC%97%E5%8F%B7/" style="font-size: 10px;">公众号</a> <a href="/tags/%E5%88%86%E4%BA%AB/" style="font-size: 10px;">分享</a> <a href="/tags/%E5%88%86%E5%B8%83%E5%BC%8F/" style="font-size: 10px;">分布式</a> <a href="/tags/%E5%88%9B%E4%B8%9A/" style="font-size: 10px;">创业</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 12.5px;">前端</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%8E%9F%E7%94%9FAPP/" style="font-size: 10px;">原生APP</a> <a href="/tags/%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 12.5px;">反爬虫</a> <a href="/tags/%E5%91%BD%E4%BB%A4/" style="font-size: 10px;">命令</a> <a href="/tags/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/" style="font-size: 10px;">响应式布局</a> <a href="/tags/%E5%9E%83%E5%9C%BE%E9%82%AE%E4%BB%B6/" style="font-size: 10px;">垃圾邮件</a> <a href="/tags/%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A/" style="font-size: 10px;">域名绑定</a> <a href="/tags/%E5%A4%8D%E7%9B%98/" style="font-size: 10px;">复盘</a> <a href="/tags/%E5%A4%A7%E4%BC%97%E7%82%B9%E8%AF%84/" style="font-size: 10px;">大众点评</a> <a href="/tags/%E5%AD%97%E4%BD%93%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 10px;">字体反爬虫</a> <a href="/tags/%E5%AD%97%E7%AC%A6%E9%97%AE%E9%A2%98/" style="font-size: 10px;">字符问题</a> <a href="/tags/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/" style="font-size: 10px;">学习方法</a> <a href="/tags/%E5%AE%89%E5%8D%93/" style="font-size: 10px;">安卓</a> <a href="/tags/%E5%AE%9E%E7%94%A8/" style="font-size: 10px;">实用</a> <a href="/tags/%E5%B0%81%E9%9D%A2/" style="font-size: 10px;">封面</a> <a href="/tags/%E5%B4%94%E5%BA%86%E6%89%8D/" style="font-size: 18.75px;">崔庆才</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 12.5px;">工具</a> <a href="/tags/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/" style="font-size: 10px;">开发工具</a> <a href="/tags/%E5%BE%AE%E8%BD%AF/" style="font-size: 10px;">微软</a> <a href="/tags/%E6%80%9D%E8%80%83/" style="font-size: 10px;">思考</a> <a href="/tags/%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE/" style="font-size: 10px;">手机访问</a> <a href="/tags/%E6%95%99%E7%A8%8B/" style="font-size: 10px;">教程</a> <a href="/tags/%E6%95%99%E8%82%B2/" style="font-size: 10px;">教育</a> <a href="/tags/%E6%96%B0%E4%B9%A6/" style="font-size: 12.5px;">新书</a> <a href="/tags/%E6%96%B9%E6%B3%95%E8%AE%BA/" style="font-size: 10px;">方法论</a> <a href="/tags/%E6%97%85%E6%B8%B8/" style="font-size: 10px;">旅游</a> <a href="/tags/%E6%97%A5%E5%BF%97/" style="font-size: 10px;">日志</a> <a href="/tags/%E6%9A%97%E6%97%B6%E9%97%B4/" style="font-size: 10px;">暗时间</a> <a href="/tags/%E6%9D%9C%E5%85%B0%E7%89%B9/" style="font-size: 11.25px;">杜兰特</a> <a href="/tags/%E6%A1%8C%E9%9D%A2/" style="font-size: 10px;">桌面</a> <a href="/tags/%E6%AD%8C%E5%8D%95/" style="font-size: 10px;">歌单</a> <a href="/tags/%E6%B1%9F%E5%8D%97/" style="font-size: 10px;">江南</a> <a href="/tags/%E6%B8%B8%E6%88%8F/" style="font-size: 10px;">游戏</a> <a href="/tags/%E7%84%A6%E8%99%91/" style="font-size: 10px;">焦虑</a> <a href="/tags/%E7%88%AC%E8%99%AB/" style="font-size: 16.25px;">爬虫</a> <a href="/tags/%E7%88%AC%E8%99%AB%E4%B9%A6%E7%B1%8D/" style="font-size: 11.25px;">爬虫书籍</a> <a href="/tags/%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F/" style="font-size: 10px;">环境变量</a> <a href="/tags/%E7%94%9F%E6%B4%BB%E7%AC%94%E8%AE%B0/" style="font-size: 10px;">生活笔记</a> <a href="/tags/%E7%99%BB%E5%BD%95/" style="font-size: 10px;">登录</a> <a href="/tags/%E7%9F%A5%E4%B9%8E/" style="font-size: 10px;">知乎</a> <a href="/tags/%E7%9F%AD%E4%BF%A1/" style="font-size: 10px;">短信</a> <a href="/tags/%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81/" style="font-size: 10px;">短信验证码</a> <a href="/tags/%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/" style="font-size: 10px;">笔记软件</a> <a href="/tags/%E7%AF%AE%E7%BD%91/" style="font-size: 10px;">篮网</a> <a href="/tags/%E7%BA%B8%E5%BC%A0/" style="font-size: 10px;">纸张</a> <a href="/tags/%E7%BB%84%E4%BB%B6/" style="font-size: 10px;">组件</a> <a href="/tags/%E7%BD%91%E7%AB%99/" style="font-size: 10px;">网站</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/" style="font-size: 11.25px;">网络爬虫</a> <a href="/tags/%E7%BE%8E%E5%AD%A6/" style="font-size: 10px;">美学</a> <a href="/tags/%E8%82%89%E5%A4%B9%E9%A6%8D/" style="font-size: 10px;">肉夹馍</a> <a href="/tags/%E8%85%BE%E8%AE%AF%E4%BA%91/" style="font-size: 10px;">腾讯云</a> <a href="/tags/%E8%87%AA%E5%BE%8B/" style="font-size: 10px;">自律</a> <a href="/tags/%E8%A5%BF%E5%B0%91%E7%88%B7/" style="font-size: 10px;">西少爷</a> <a href="/tags/%E8%A7%86%E9%A2%91/" style="font-size: 10px;">视频</a> <a href="/tags/%E8%B0%B7%E6%AD%8C%E9%AA%8C%E8%AF%81%E7%A0%81/" style="font-size: 10px;">谷歌验证码</a> <a href="/tags/%E8%BF%90%E8%90%A5/" style="font-size: 10px;">运营</a> <a href="/tags/%E8%BF%9C%E7%A8%8B/" style="font-size: 10px;">远程</a> <a href="/tags/%E9%80%86%E5%90%91/" style="font-size: 10px;">逆向</a> <a href="/tags/%E9%85%8D%E7%BD%AE/" style="font-size: 10px;">配置</a> <a href="/tags/%E9%87%8D%E8%A3%85/" style="font-size: 10px;">重装</a> <a href="/tags/%E9%98%BF%E6%9D%9C/" style="font-size: 10px;">阿杜</a> <a href="/tags/%E9%9D%99%E8%A7%85/" style="font-size: 17.5px;">静觅</a> <a href="/tags/%E9%A2%A0%E8%A6%86/" style="font-size: 10px;">颠覆</a> <a href="/tags/%E9%A3%9E%E4%BF%A1/" style="font-size: 10px;">飞信</a> <a href="/tags/%E9%B8%BF%E8%92%99/" style="font-size: 10px;">鸿蒙</a>
              </div>
              <script>
                const tagsColors = ['#00a67c', '#5cb85c', '#d9534f', '#567e95', '#b37333', '#f4843d', '#15a287']
                const tagsElements = document.querySelectorAll('.sidebar-panel-tags .content a')
                tagsElements.forEach((item) =>
                {
                  item.style.backgroundColor = tagsColors[Math.floor(Math.random() * tagsColors.length)]
                })

              </script>
            </div>
            <div class="sidebar-panel sidebar-panel-categories sidebar-panel-active">
              <h4 class="name"> 分类 </h4>
              <div class="content">
                <ul class="category-list">
                  <li class="category-list-item"><a class="category-list-link" href="/categories/C-C/">C/C++</a><span class="category-list-count">23</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a><span class="category-list-count">14</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a><span class="category-list-count">5</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">26</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">15</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Markdown/">Markdown</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Net/">Net</a><span class="category-list-count">4</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Other/">Other</a><span class="category-list-count">39</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">27</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Paper/">Paper</a><span class="category-list-count">2</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Python/">Python</a><span class="category-list-count">261</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a><span class="category-list-count">2</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E5%B1%95%E7%A4%BA/">个人展示</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%97%A5%E8%AE%B0/">个人日记</a><span class="category-list-count">9</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E8%AE%B0%E5%BD%95/">个人记录</a><span class="category-list-count">4</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E9%9A%8F%E7%AC%94/">个人随笔</a><span class="category-list-count">15</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE/">安装配置</a><span class="category-list-count">59</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E8%B0%88/">技术杂谈</a><span class="category-list-count">88</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9C%AA%E5%88%86%E7%B1%BB/">未分类</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E7%94%9F%E6%B4%BB%E7%AC%94%E8%AE%B0/">生活笔记</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E7%A6%8F%E5%88%A9%E4%B8%93%E5%8C%BA/">福利专区</a><span class="category-list-count">6</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E8%81%8C%E4%BD%8D%E6%8E%A8%E8%8D%90/">职位推荐</a><span class="category-list-count">2</span></li>
                </ul>
              </div>
            </div>
            <div class="sidebar-panel sidebar-panel-friends sidebar-panel-active">
              <h4 class="name"> 友情链接 </h4>
              <ul class="friends">
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/j2dub.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.findhao.net/" target="_blank" rel="noopener">FindHao</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ou6mm.jpg">
                  </span>
                  <span class="link">
                    <a href="https://diygod.me/" target="_blank" rel="noopener">DIYgod</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/6apxu.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.51dev.com/" target="_blank" rel="noopener">IT技术社区</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.jankl.com/img/titleshu.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.jankl.com/" target="_blank" rel="noopener">liberalist</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/bqlbs.png">
                  </span>
                  <span class="link">
                    <a href="http://www.urselect.com/" target="_blank" rel="noopener">优社电商</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/8s88c.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.yuanrenxue.com/" target="_blank" rel="noopener">猿人学</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/2wgg5.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.yunlifang.cn/" target="_blank" rel="noopener">云立方</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/shwr6.png">
                  </span>
                  <span class="link">
                    <a href="http://lanbing510.info/" target="_blank" rel="noopener">冰蓝</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/blvoh.jpg">
                  </span>
                  <span class="link">
                    <a href="https://lengyue.me/" target="_blank" rel="noopener">冷月</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="http://qianxunclub.com/favicon.png">
                  </span>
                  <span class="link">
                    <a href="http://qianxunclub.com/" target="_blank" rel="noopener">千寻啊千寻</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/0044u.jpg">
                  </span>
                  <span class="link">
                    <a href="http://kodcloud.com/" target="_blank" rel="noopener">可道云</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ygnpn.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.kunkundashen.cn/" target="_blank" rel="noopener">坤坤大神</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/22uv1.png">
                  </span>
                  <span class="link">
                    <a href="http://www.cenchong.com/" target="_blank" rel="noopener">岑冲博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ev9kl.png">
                  </span>
                  <span class="link">
                    <a href="http://www.zxiaoji.com/" target="_blank" rel="noopener">张小鸡</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.503error.com/favicon.ico">
                  </span>
                  <span class="link">
                    <a href="https://www.503error.com/" target="_blank" rel="noopener">张志明个人博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/x714o.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.hubwiz.com/" target="_blank" rel="noopener">汇智网</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/129d8.png">
                  </span>
                  <span class="link">
                    <a href="https://www.bysocket.com/" target="_blank" rel="noopener">泥瓦匠BYSocket</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.xiongge.club/favicon.ico">
                  </span>
                  <span class="link">
                    <a href="https://www.xiongge.club/" target="_blank" rel="noopener">熊哥club</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/3w4fe.png">
                  </span>
                  <span class="link">
                    <a href="https://zerlong.com/" target="_blank" rel="noopener">知语</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/44hxf.png">
                  </span>
                  <span class="link">
                    <a href="http://redstonewill.com/" target="_blank" rel="noopener">红色石头</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/8g1fk.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.laodong.me/" target="_blank" rel="noopener">老董博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/wkaus.jpg">
                  </span>
                  <span class="link">
                    <a href="https://zhaoshuai.me/" target="_blank" rel="noopener">碎念</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/pgo0r.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.chenwenguan.com/" target="_blank" rel="noopener">陈文管的博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/kk82a.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.lxlinux.net/" target="_blank" rel="noopener">良许Linux教程网</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/lj0t2.jpg">
                  </span>
                  <span class="link">
                    <a href="https://tanqingbo.cn/" target="_blank" rel="noopener">IT码农</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/i8cdr.png">
                  </span>
                  <span class="link">
                    <a href="https://junyiseo.com/" target="_blank" rel="noopener">均益个人博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/chwv2.png">
                  </span>
                  <span class="link">
                    <a href="https://brucedone.com/" target="_blank" rel="noopener">大鱼的鱼塘</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/2y43o.png">
                  </span>
                  <span class="link">
                    <a href="http://bbs.nightteam.cn/" target="_blank" rel="noopener">夜幕爬虫安全论坛</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/zvc3w.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.weishidong.com/" target="_blank" rel="noopener">韦世东的技术专栏</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ebudy.jpg">
                  </span>
                  <span class="link">
                    <a href="https://chuanjiabing.com/" target="_blank" rel="noopener">穿甲兵技术社区</a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </aside>
        <div id="sidebar-dimmer"></div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer-inner">
        <div class="copyright"> &copy; <span itemprop="copyrightYear">2021</span>
          <span class="with-love">
            <i class="fa fa-heart"></i>
          </span>
          <span class="author" itemprop="copyrightHolder">崔庆才丨静觅</span>
          <span class="post-meta-divider">|</span>
          <span class="post-meta-item-icon">
            <i class="fa fa-chart-area"></i>
          </span>
          <span title="站点总字数">2.6m</span>
          <span class="post-meta-divider">|</span>
          <span class="post-meta-item-icon">
            <i class="fa fa-coffee"></i>
          </span>
          <span title="站点阅读时长">39:54</span>
        </div>
        <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动 </div>
        <div class="beian"><a href="https://beian.miit.gov.cn/" rel="noopener" target="_blank">京ICP备18015597号-1 </a>
        </div>
        <script>
          (function ()
          {
            function leancloudSelector(url)
            {
              url = encodeURI(url);
              return document.getElementById(url).querySelector('.leancloud-visitors-count');
            }

            function addCount(Counter)
            {
              var visitors = document.querySelector('.leancloud_visitors');
              var url = decodeURI(visitors.id);
              var title = visitors.dataset.flagTitle;
              Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify(
              {
                url
              }))).then(response => response.json()).then((
              {
                results
              }) =>
              {
                if (results.length > 0)
                {
                  var counter = results[0];
                  leancloudSelector(url).innerText = counter.time + 1;
                  Counter('put', '/classes/Counter/' + counter.objectId,
                  {
                    time:
                    {
                      '__op': 'Increment',
                      'amount': 1
                    }
                  }).catch(error =>
                  {
                    console.error('Failed to save visitor count', error);
                  });
                }
                else
                {
                  Counter('post', '/classes/Counter',
                  {
                    title,
                    url,
                    time: 1
                  }).then(response => response.json()).then(() =>
                  {
                    leancloudSelector(url).innerText = 1;
                  }).catch(error =>
                  {
                    console.error('Failed to create', error);
                  });
                }
              }).catch(error =>
              {
                console.error('LeanCloud Counter Error', error);
              });
            }

            function showTime(Counter)
            {
              var visitors = document.querySelectorAll('.leancloud_visitors');
              var entries = [...visitors].map(element =>
              {
                return decodeURI(element.id);
              });
              Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify(
              {
                url:
                {
                  '$in': entries
                }
              }))).then(response => response.json()).then((
              {
                results
              }) =>
              {
                for (let url of entries)
                {
                  let target = results.find(item => item.url === url);
                  leancloudSelector(url).innerText = target ? target.time : 0;
                }
              }).catch(error =>
              {
                console.error('LeanCloud Counter Error', error);
              });
            }
            let
            {
              app_id,
              app_key,
              server_url
            } = {
              "enable": true,
              "app_id": "6X5dRQ0pnPWJgYy8SXOg0uID-gzGzoHsz",
              "app_key": "ziLDVEy73ne5HtFTiGstzHMS",
              "server_url": "https://6x5drq0p.lc-cn-n1-shared.com",
              "security": false
            };

            function fetchData(api_server)
            {
              var Counter = (method, url, data) =>
              {
                return fetch(`${api_server}/1.1${url}`,
                {
                  method,
                  headers:
                  {
                    'X-LC-Id': app_id,
                    'X-LC-Key': app_key,
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify(data)
                });
              };
              if (CONFIG.page.isPost)
              {
                if (CONFIG.hostname !== location.hostname) return;
                addCount(Counter);
              }
              else if (document.querySelectorAll('.post-title-link').length >= 1)
              {
                showTime(Counter);
              }
            }
            let api_server = app_id.slice(-9) !== '-MdYXbMMI' ? server_url : `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com`;
            if (api_server)
            {
              fetchData(api_server);
            }
            else
            {
              fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id).then(response => response.json()).then((
              {
                api_server
              }) =>
              {
                fetchData('https://' + api_server);
              });
            }
          })();

        </script>
      </div>
      <div class="footer-stat">
        <span id="cnzz_stat_icon_1279355174"></span>
        <script type="text/javascript">
          document.write(unescape("%3Cspan id='cnzz_stat_icon_1279355174'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279355174%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));

        </script>
      </div>
    </footer>
  </div>
  <script src="//cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/.js"></script>
  <script src="/js/schemes/pisces.js"></script>
  <script src="/.js"></script>
  <script src="/js/next-boot.js"></script>
  <script src="/.js"></script>
  <script>
    (function ()
    {
      var canonicalURL, curProtocol;
      //Get the <link> tag
      var x = document.getElementsByTagName("link");
      //Find the last canonical URL
      if (x.length > 0)
      {
        for (i = 0; i < x.length; i++)
        {
          if (x[i].rel.toLowerCase() == 'canonical' && x[i].href)
          {
            canonicalURL = x[i].href;
          }
        }
      }
      //Get protocol
      if (!canonicalURL)
      {
        curProtocol = window.location.protocol.split(':')[0];
      }
      else
      {
        curProtocol = canonicalURL.split(':')[0];
      }
      //Get current URL if the canonical URL does not exist
      if (!canonicalURL) canonicalURL = window.location.href;
      //Assign script content. Replace current URL with the canonical URL
      ! function ()
      {
        var e = /([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,
          r = canonicalURL,
          t = document.referrer;
        if (!e.test(r))
        {
          var n = (String(curProtocol).toLowerCase() === 'https') ? "https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif" : "//api.share.baidu.com/s.gif";
          t ? (n += "?r=" + encodeURIComponent(document.referrer), r && (n += "&l=" + r)) : r && (n += "?l=" + r);
          var i = new Image;
          i.src = n
        }
      }(window);
    })();

  </script>
  <script src="/js/local-search.js"></script>
  <script src="/.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
  <script>
    NexT.utils.loadComments(document.querySelector('#gitalk-container'), () =>
    {
      NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () =>
      {
        var gitalk = new Gitalk(
        {
          clientID: '4c86ce1d7c4fbb3b277c',
          clientSecret: '4927beb0f90e2c07e66c99d9d2529cf3eb8ac8e4',
          repo: 'Blog',
          owner: 'germey',
          admin: ['germey'],
          id: '9a3a72e55061d6c4ac276091890c3803',
          language: 'zh-CN',
          distractionFreeMode: true
        });
        gitalk.render('gitalk-container');
      }, window.Gitalk);
    });

  </script>
</body>

</html>
